/* eslint-disable array-callback-return */
import React, { PureComponent } from 'react';
import {
  ExclamationCircleOutlined,
  PlusOutlined,
  UploadOutlined,
  QuestionCircleOutlined,
} from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Col,
  Row,
  DatePicker,
  Input,
  Select,
  Tooltip,
  message,
  InputNumber,
  Progress,
  Modal,
  Spin,
  AutoComplete,
  Switch,
} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import Authorized from '@/utils/Authorized';
import FooterToolbar from '@/components/FooterToolbar';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import downloadFile, { urlParse } from '@/utils/utils';
import Customer from '../../components/Customer';
import StandardTable from '@/components/StandardTable';
import styles from './style.less';
import BatchUpload from './BatchUpload';
import HOCSelect from '@/components/AntDesign/Select';

const { confirm } = Modal;
const { Option } = Select;
const { TextArea, Search } = Input;
const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

@connect(({ oncechargens, loading }) => ({
  oncechargens,
  loading: loading.models.oncechargens,
  custDataList: oncechargens.custDataList,
  empNameList: oncechargens.empNameList,
  onceFeeChrgDrafId: oncechargens.onceFeeChrgDrafId,
}))
@Form.create()
class AdvancedForm extends PureComponent {
  // 组件内所有数据的初始状态
  state = {
    isTableShow: true, // 选择开关
    ONCE_FEE_WAY: [], // 收费方式下拉
    product: [], // 产品下拉
    suppList: [], // 签约方下拉
    tableBlock: true, // 表格的显示
    nowPage: 1,
    pageNum: 10,
    onceFeeChrgId: '', // 一次性id
    custIds: null,
    pdIdid: null,
    feeWayid: null,
    custContIdid: null,
    productData: {},
    progressPercent: 0,
    modaVisibl: false,
    ordSndrId: null,
    busiYm: null,
  };

  componentDidMount() {
    const { location, dispatch, form } = this.props;
    const tempUrl = location.search;
    const { baseInfoId } = urlParse(tempUrl);
    this.setState({ onceFeeChrgId: baseInfoId });
    dispatch({
      type: 'oncechargens/updateModelData',
      payload: {
        onceFeeChrgDrafId: null,
      },
    });
    // 获取字典
    dispatch({
      type: 'publicdata/fetchDictCode',
      payload: ['ONCE_FEE_WAY', 'ADD_ID_TYPE'],
      callback: res => {
        this.setState({
          ONCE_FEE_WAY: res.ONCE_FEE_WAY,
        });
      },
    });

    // 获取一次性修改详情
    dispatch({
      type: 'oncechargens/getUpdateDetail',
      payload: { onceFeeChrgId: baseInfoId },
    }).then(res => {
      if (res.success) {
        const newbusiYm = res.data.busiYm;
        res.data.busiYm = `${`${res.data.busiYm}`.substring(0, 4)}-${`${res.data.busiYm}`.substring(
          4
        )}`;
        if (res.data.feeYm) {
          res.data.feeYm = `${`${res.data.feeYm}`.substring(0, 4)}-${`${res.data.feeYm}`.substring(
            4
          )}`;
        }
        dispatch({
          type: 'oncechargens/updateModelData',
          payload: { onceFeeChrgDrafId: res.data && res.data.onceFeeChrgDrafId },
        });
        this.setState({
          custIds: res.data.custId,
          ordSndrId: res.data.ordSndrId,
          pdIdid: res.data.pdId,
          busiYm: newbusiYm,
          feeWayid: res.data.feeWay,
          chargeType: res.data.feeWay,
          custContIdid: res.data.custContId,
          custId: res.data.custId,
        });
        const getFieldsList = form.getFieldsValue();
        Object.keys(getFieldsList).forEach(key => {
          if (res.data[key]) {
            if (key === 'feeWay') {
              form.setFieldsValue({ [key]: res.data.feeWayName });
            } else if (key === 'pdId') {
              form.setFieldsValue({ [key]: res.data.pdName });
            } else if (key === 'custId') {
              form.setFieldsValue({
                [key]: res.data.custNo
                  ? `${res.data.custName} （${res.data.custNo}）`
                  : `${res.data.custName}`,
              });
            } else if (key === 'custContId') {
              form.setFieldsValue({ [key]: res.data.custContName });
            } else if (key === 'busiYm') {
              form.setFieldsValue({ busiYm: moment(res.data.busiYm) });
            } else if (key === 'feeYm') {
              form.setFieldsValue({ feeYm: moment(res.data.feeYm) });
            } else if (key === 'ordSndrId') {
              form.setFieldsValue({ [key]: res.data.ordSndrName });
            } else {
              form.setFieldsValue({ [key]: res.data[key] });
            }
          }
        });
      } else {
        message.warning(`${res.message || '暂无数据！'}`);
      }
      this.getList(1, 10, res.data.onceFeeChrgDrafId);
    });
    // 产品
    dispatch({
      type: 'oncechargens/getProductList',
      payload: { onceFeeChrgId: baseInfoId },
    }).then(res => {
      if (res.success) {
        this.setState({
          product: res.data,
        });
      } else {
        this.setState({
          product: [],
        });
      }
    });
  }

  // 选择开关
  changeSwitch = checked => {
    const { onceFeeChrgDrafId } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({ isTableShow: checked });
    if (checked) {
      this.getList(nowPage, pageNum, onceFeeChrgDrafId);
    }
  };

  // 选择收费方式
  changeCharge = e => {
    if (+e === 1) {
      this.setState({
        chargeType: e,
      });
    } else if (+e === 2) {
      this.setState({
        chargeType: e,
      });
    }
  };

  // 删除某条数据
  delLsit = record => {
    const that = this;
    const { nowPage, pageNum } = that.state;
    const { dispatch, onceFeeChrgDrafId } = that.props;
    confirm({
      icon: <QuestionCircleOutlined />,
      title: '你确定要删除此条数据吗？',
      okText: '确定',
      okType: 'primary',
      cancelText: '取消',
      style: { top: 200 },
      onOk() {
        dispatch({
          type: 'oncechargens/deleteRecord',
          payload: { onceFeeChrgDetDrafId: record.onceFeeChrgDetDrafId },
        }).then(res => {
          if (res.success) {
            message.success(`${res.message || '删除成功！'}`);
            that.getList(nowPage, pageNum, onceFeeChrgDrafId);
          } else {
            message.warning(`${res.message || res.data || '删除失败！'}`);
          }
        });
      },
      onCancel() {
        that.setState({ selectedRowKeys: [] });
      },
    });
  };

  // 取消
  cancel = () => {
    router.push('/chargmanage/oncechargens/index');
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    const { onceFeeChrgDrafId } = this.props;
    this.getList(pagination.current, pagination.pageSize, onceFeeChrgDrafId);
  };

  submitAll = () => {
    const { form, dispatch, onceFeeChrgDrafId } = this.props;
    const { onceFeeChrgId, pdIdid, chargeType, custIds, custContIdid } = this.state;
    let submitData = {};
    const getFieldsList = form.getFieldsValue();
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo', 'feeYm']
        : ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo'],
      (err, values) => {
        if (!err) {
          const busiYm = values.busiYm.format('YYYYMM');
          submitData = {
            onceFeeChrgId,
            onceFeeChrgDrafId,
            pdId: pdIdid,
            feeWay: chargeType,
            custId: custIds,
            custContId: custContIdid || values.custContId,
            remark: getFieldsList.remark,
            feeAmo: values.feeAmo,
            busiYm,
          };
          if (values.feeYm) {
            const feeDay = values.feeYm.format('YYYYMM');
            submitData.feeYm = feeDay;
          }
          if (String(values.feeAmo) === '0') {
            message.warning('收费总金额不能为 0 ');
            return;
          }
          dispatch({
            type: 'oncechargens/updateSubmit',
            payload: submitData,
          }).then(res => {
            if (res.success) {
              message.success('修改成功！');
              router.push('/chargmanage/oncechargens/index');
            } else {
              message.warning(res.message || '修改失败！');
            }
          });
        }
      }
    );
  };

  // 新增修改提交数据
  submitData = () => {
    const { form, dispatch, onceFeeChrgDrafId } = this.props;
    const {
      productData,
      chargeType,
      nowPage,
      pageNum,

      pdIdid,
      idType,
    } = this.state;
    const getFieldsList = form.getFieldsValue();
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo', 'feeYm']
        : ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo'],
      err => {
        if (!err) {
          const submitData = {
            feeYm: productData.feeYm ? productData.feeYm : null,
            pdId: productData.pdId,
            ordSndrId: productData.ordSndrId,
            feeWay: productData.feeWay,
            custId: productData.custId,
            custContId: productData.custContId,
            busiYm: productData.busiYm,
            onceFeeChrgDrafId,
            onceFeeChrgDet: {
              empName: getFieldsList.moName && getFieldsList.moName.label,
              idType,
              idNo: getFieldsList.idnoNumber,
              perAmo: getFieldsList.moperAmuout, //   个人金额 perAmo
              comAmo: getFieldsList.entAmount, // 企业金额 comAmo
              fee: getFieldsList.moService, // 服务费 fee
              remark: getFieldsList.remarkTwo,
            },
          };
          if (
            pdIdid === 'PDINF_0000000001' ||
            pdIdid === 'PDINF_0000000002' ||
            pdIdid === 'PDINF_0000000004' ||
            pdIdid === 'PDINF_0000000005'
          ) {
            if (
              !getFieldsList.moperAmuout &&
              !getFieldsList.entAmount &&
              !getFieldsList.moService
            ) {
              message.warning('个人金额、企业金额和服务费必须填写一项 ');
              return;
            }
          } else if (!getFieldsList.moService) {
            return;
          }
          dispatch({
            type: 'oncechargens/modalSubmitData',
            payload: submitData,
          }).then(res => {
            if (res.success) {
              message.warning('新增成功！');
              this.getList(nowPage, pageNum, onceFeeChrgDrafId);
              this.handleModalVisible(false);
            } else {
              message.warning(`${res.message || '新增失败！'}`);
            }
          });
        }
      }
    );
  };

  // 点击上传
  uploadFile = () => {
    const { form, dispatch } = this.props;
    const {
      pdIdid,
      feeWayid,
      ordSndrId,
      onceFeeChrgId,
      custIds,
      oncefeeDraftId,
      chargeType,
      selectPdId,
    } = this.state;
    const getFieldsList = form.getFieldsValue();
    let errorInfo = false;
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo', 'feeDay']
        : ['pdName', 'feeType', 'ordSndrId', 'custId', 'feeService', 'feeAmo'],
      err => {
        errorInfo = !err;
        if (!err) {
          this.setState({
            tableBlock: false,
          });
          let feeYm = null;
          if (+chargeType === 2) {
            feeYm = getFieldsList.feeYm ? getFieldsList.feeYm.format('YYYYMM') : null;
          }
          dispatch({
            type: 'oncechargens/updateModelData',
            payload: {
              batchQuery: {
                onceFeeChrgId: onceFeeChrgId == null ? oncefeeDraftId : onceFeeChrgId,
                pdId: pdIdid || null,
                feeWay: feeWayid || null,
                custId: custIds || null,
                ordSndrId: ordSndrId || null,
                busiYm: getFieldsList.busiYm ? getFieldsList.busiYm.format('YYYYMM') : null,
                feeYm,
              },
            },
          });
          dispatch({
            type: 'oncechargens/getDownloadInfo',
            payload: {
              pdId: selectPdId,
            },
          });
        }
      }
    );
    return errorInfo;
  };

  // 点击新增时
  Updownadd = () => {
    const { form, onceFeeChrgDrafId } = this.props;
    const { pdIdid, feeWayid, chargeType, custIds, ordSndrId, busiYm } = this.state;
    const getFieldsList = form.getFieldsValue();
    const product = {
      pdId: pdIdid,
      feeWay: feeWayid,
      custId: custIds,
      ordSndrId,
      onceFeeChrgDrafId,
      busiYm,
    };
    if (+chargeType === 2) {
      product.feeYm = getFieldsList.feeYm ? getFieldsList.feeYm.format('YYYYMM') : null;
    }
    form.validateFieldsAndScroll(
      +chargeType === 2
        ? ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo', 'feeYm']
        : ['pdId', 'feeWay', 'ordSndrId', 'custId', 'busiYm', 'feeAmo'],
      err => {
        if (!err) {
          this.setState({
            productData: product,
          });
          this.handleModalVisible(true);
        }
      }
    );
  };

  // 切换模态框：新增
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // 取消关闭模态框
  cancelModal = () => {
    this.handleModalVisible(false);
  };

  // 下载错误数据
  downloadError = () => {
    const { batchId } = this.state;
    downloadFile({ batchId }, '/csApi/oncefeeFile/dowoloadEmpDet', 'POST');
  };

  getList = (Page, pageNum, onceFeeChrgDrafId) => {
    const { dispatch } = this.props;
    const pageArg = {
      currentPage: Page,
      pageSize: pageNum,
    };
    const pladta = {
      pageArg,
      onceFeeChrgDrafId,
    };
    dispatch({
      type: 'oncechargens/getListData',
      payload: pladta,
    });
  };

  // 姓名模糊查询
  searchEmpName = value => {
    const { dispatch } = this.props;
    const { custId } = this.state;
    if (value.trim().length) {
      dispatch({
        type: 'oncechargens/fetchEmpNameList',
        payload: {
          empName: value,
          custId,
        },
      });
    }
  };

  // 选择姓名
  selectEmpName = value => {
    const { empNameList, form } = this.props;
    empNameList.map(item => {
      if (item.empId === value.key) {
        form.setFieldsValue({ idnoNumber: item.idCode });
        this.setState({ idType: item.idType });
      }
    });
  };

  // 输入证件号查询名字
  searchIdCode = value => {
    const { dispatch, form } = this.props;
    const { custId } = this.state;
    form.resetFields(['moName']);
    dispatch({
      type: 'oncechargens/fetchEmpNameList',
      payload: {
        idCode: value,
        custId,
      },
    }).then(data => {
      if (data.length) {
        data.map(item => {
          if (item.idCode === value) {
            form.setFieldsValue({ moName: { key: item.empId, label: item.empName } });
            this.setState({ idType: item.idType });
          }
        });
      }
    });
  };

  // 下载模板
  downtemplte = () => {
    const { dispatch } = this.props;
    const { pdIdid } = this.state;
    dispatch({
      type: 'oncechargens/download',
      payload: {
        pdId: pdIdid,
      },
    }).then(res => {
      const fileInfo = res.data.split('|');
      downloadFile({ fileId: fileInfo[0], fileName: fileInfo[1] });
    });
  };

  // 点击完成
  complete = () => {
    const { dispatch, onceFeeChrgDrafId } = this.props;
    const { nowPage, pageNum } = this.state;
    this.setState({
      tableBlock: true,
    });
    dispatch({
      type: 'oncechargens/updateModelData',
      payload: { currentStep: 0 },
    });
    this.getList(nowPage, pageNum, onceFeeChrgDrafId);
  };

  // 客户名称
  getData = (value, id) => {
    const { form } = this.props;
    if (id) {
      form.setFieldsValue({ [id]: value });
      this.setState({ [id]: value });
    }
  };

  // 渲染函数
  render() {
    const {
      modaVisibl,
      progressPercent,
      feeWayid,
      ONCE_FEE_WAY,
      product,
      suppList,
      chargeType,
      modalVisible,
      tableBlock,
      isTableShow,
      pdIdid,
    } = this.state;
    const {
      form: { getFieldDecorator },
      submitting,
      custDataList,
      loading,
      empNameList = [],
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
    };
    const columns = [
      {
        title: '姓名',
        dataIndex: 'empName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '证件号',
        dataIndex: 'idNo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '收费金额',
        dataIndex: 'feeAmo',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? '个人金额'
            : null,
        dataIndex:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? 'perAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? '企业金额'
            : null,
        dataIndex:
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005'
            ? 'comAmo'
            : null,
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val =>
          pdIdid === 'PDINF_0000000001' ||
          pdIdid === 'PDINF_0000000002' ||
          pdIdid === 'PDINF_0000000004' ||
          pdIdid === 'PDINF_0000000005' ? (
            <span>{val === 0 ? 0 : (val && val) || '--'}</span>
          ) : null,
      },
      {
        title: '服务费',
        dataIndex: 'fee',
        align: 'right',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '备注',
        dataIndex: 'remark',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: val => (val && val) || '--',
      },
      {
        title: '操作',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: (text, record) => (
          <span className="editable-row-operations">
            <div>
              <a key="delete" onClick={() => this.delLsit(record)}>
                删除
              </a>
            </div>
          </span>
        ),
      },
    ];

    // 模态框配置
    const modalConfig = {
      title: '新增员工',
      visible: modalVisible,
      onOk: this.submitData,
      okText: '提交',
      onCancel: this.cancelModal,
      destroyOnClose: true,
    };
    return (
      <Form layout="vertical">
        <Spin tip="Loading..." spinning={loading}>
          <PageHeaderWrapper wrapperClassName={styles.advancedForm}>
            <Card title="基本信息">
              <Row gutter={64}>
                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem label="产品">
                    {getFieldDecorator('pdId', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <Select placeholder="请选择" disabled>
                        {product.map(item => (
                          <Option key={item.pdCode} value={item.pdCode}>
                            {item.pdName}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem
                    label={
                      <Tooltip
                        placement="right"
                        title="单独收费指不进入收费账单，可直接做到款认领或财务收费；合并账单收费则是进入账单一起向客户收费。"
                      >
                        <span>收费方式</span>
                        <ExclamationCircleOutlined style={{ marginLeft: 5 }} />
                      </Tooltip>
                    }
                  >
                    {getFieldDecorator('feeWay', {
                      rules: [{ required: true, message: '请选择' }],
                    })(
                      <Select
                        placeholder="请选择"
                        onChange={this.changeCharge}
                        disabled={feeWayid === 2}
                      >
                        {ONCE_FEE_WAY.map(item => (
                          <Option key={item.itemCode} value={item.itemCode}>
                            {item.itemName}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem label="签约方">
                    {getFieldDecorator('ordSndrId', {})(
                      <Select placeholder="请选择" disabled>
                        {suppList.map(item => (
                          <Option key={item.contId} value={item.contId}>
                            {item.contName}
                          </Option>
                        ))}
                      </Select>
                    )}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="客户名称">
                    {getFieldDecorator('custId', {
                      rules: [{ required: true, message: '请输入' }],
                    })(<Customer getData={this.getData} disabled />)}
                  </FormItem>
                </Col>

                <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                  <FormItem label="业务年月">
                    {getFieldDecorator('busiYm', {
                      rules: [{ required: true, message: '请选择' }],
                    })(<MonthPicker format="YYYY-MM" style={{ width: '100%' }} />)}
                  </FormItem>
                </Col>
                <Col xl={{ span: 8 }} lg={{ span: 8 }} md={{ span: 8 }} sm={24}>
                  <FormItem label="收费总金额">
                    {getFieldDecorator('feeAmo', {
                      rules: [
                        {
                          required: true,
                          message: '请输入小数点不超过2位的数字',
                          pattern: /^-?\d+\.?\d{0,2}$/,
                        },
                      ],
                    })(
                      <InputNumber
                        style={{ width: '100%' }}
                        placeholder="请输入"
                        min={0.01}
                        max={9999999.99}
                      />
                    )}
                  </FormItem>
                </Col>
                <div style={{ clear: 'both' }} />
                {+chargeType === 2 ? (
                  <Col xl={{ span: 8 }} lg={8} md={8} sm={24}>
                    <FormItem label="收费年月">
                      {getFieldDecorator('feeYm', {
                        rules: [{ required: true, message: '请选择' }],
                      })(
                        <MonthPicker
                          format="YYYY-MM"
                          style={{ width: '100%' }}
                          disabled={String(feeWayid) !== '1'}
                          disabledDate={current => current < moment().subtract(1, 'months')}
                        />
                      )}
                    </FormItem>
                  </Col>
                ) : null}
              </Row>
              <Row gutter={64}>
                <Col xl={{ span: 24 }} lg={24} md={24} sm={24}>
                  <FormItem label="备注">
                    {getFieldDecorator('remark', {
                      rules: [{ required: false, message: '请输入' }],
                    })(<TextArea rows={4} maxLength={200} />)}
                  </FormItem>
                </Col>
              </Row>
            </Card>
            <Card
              title={
                <p style={{ marginBottom: 0 }}>
                  是否有员工明细
                  <Switch
                    style={{ marginLeft: 16 }}
                    checkedChildren="有"
                    defaultChecked
                    unCheckedChildren="无"
                    onChange={this.changeSwitch}
                  />
                </p>
              }
            >
              {isTableShow ? (
                <div>
                  <Authorized authority="ns:onceChrg:insertEmp" noMatch={null}>
                    <Button
                      type="primary"
                      style={{ marginRight: '20px' }}
                      onClick={this.uploadFile}
                    >
                      <UploadOutlined />
                      上传
                    </Button>
                  </Authorized>
                  <Authorized authority="ns:onceChrg:insertEmp" noMatch={null}>
                    <Button onClick={this.Updownadd}>
                      <PlusOutlined />
                      新增
                    </Button>
                  </Authorized>
                  {tableBlock ? (
                    <StandardTable
                      selectedRows={[]}
                      selectedRowKeys={[]}
                      loading={loading}
                      data={custDataList}
                      rowKey="key"
                      columns={columns}
                      onChange={this.handleStandardTableChange}
                      style={{ backgroundColor: '#fff', textaAlign: 'center', marginTop: 10 }}
                    />
                  ) : (
                    <BatchUpload
                      closeUpload={() => {
                        this.setState({
                          tableBlock: true,
                        });
                      }}
                      finishClick={this.complete}
                      custOrSupp={1}
                      checkFormSubmit={() => this.uploadFile()}
                    />
                  )}
                </div>
              ) : null}
            </Card>
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={this.cancel} style={{ marginRight: 10 }}>
                取消
              </Button>
              <Button type="primary" onClick={this.submitAll} loading={submitting}>
                提交
              </Button>
            </FooterToolbar>
            <Modal
              footer={null}
              closable={false}
              maskClosable={false}
              visible={modaVisibl}
              onCancel={() => this.setState({})}
            >
              <div style={{ textAlign: 'center' }}>
                <Progress percent={progressPercent} format={percent => `${percent}%`} />
              </div>
            </Modal>
          </PageHeaderWrapper>
          <Modal {...modalConfig}>
            <Form layout="horizontal">
              <FormItem {...formItemLayout} label="姓名">
                {getFieldDecorator('moName', {
                  rules: [{ required: true, message: '请输入' }],
                })(
                  <HOCSelect
                    placeholder="请输入关键字检索"
                    showSearch
                    showArrow={false}
                    filterOption={false}
                    onSearch={this.searchEmpName}
                    onSelect={this.selectEmpName}
                    labelInValue
                  >
                    {empNameList.length &&
                      empNameList.map(item => <Option key={item.empId}>{item.empName}</Option>)}
                  </HOCSelect>
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="证件号">
                {getFieldDecorator('idnoNumber', {
                  rules: [{ required: true, message: '请输入' }],
                })(
                  <AutoComplete>
                    <Search
                      placeholder="请输入关键字检索"
                      onSearch={value => this.searchIdCode(value)}
                    />
                  </AutoComplete>
                )}
              </FormItem>
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem {...formItemLayout} label="个人金额">
                  {getFieldDecorator('moperAmuout', {
                    rules: [
                      {
                        required: false,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              ) : null}
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem {...formItemLayout} label="企业金额">
                  {getFieldDecorator('entAmount', {
                    rules: [
                      {
                        required: false,
                        message: '请输入小数点不超过2位的数字',
                        pattern: /^-?\d+\.?\d{0,2}$/,
                      },
                    ],
                  })(
                    <InputNumber
                      style={{ width: '100%' }}
                      placeholder="请输入"
                      min={0}
                      max={9999999.99}
                    />
                  )}
                </FormItem>
              ) : null}
              <FormItem {...formItemLayout} label="服务费">
                {getFieldDecorator('moService', {
                  rules: [
                    {
                      required: !(
                        pdIdid === 'PDINF_0000000001' ||
                        pdIdid === 'PDINF_0000000002' ||
                        pdIdid === 'PDINF_0000000004' ||
                        pdIdid === 'PDINF_0000000005'
                      ),
                      message: '请输入',
                    },
                  ],
                })(
                  <InputNumber
                    style={{ width: '100%' }}
                    placeholder="请输入"
                    min={0}
                    max={9999999.99}
                    precision={2}
                  />
                )}
              </FormItem>
              <FormItem {...formItemLayout} label="备注">
                {getFieldDecorator('remarkTwo', {
                  rules: [{ required: false, message: '请输入' }],
                })(<Input placeholder="请输入" maxLength={200} />)}
              </FormItem>
              {pdIdid === 'PDINF_0000000001' ||
              pdIdid === 'PDINF_0000000002' ||
              pdIdid === 'PDINF_0000000004' ||
              pdIdid === 'PDINF_0000000005' ? (
                <FormItem
                  className={styles.markStyle}
                  {...formItemLayout}
                  label={<span style={{ color: '#ccc' }}>注</span>}
                >
                  <span style={{ color: '#ccc' }}>个人金额、企业金额和服务费必须填写一项</span>
                </FormItem>
              ) : null}
            </Form>
          </Modal>
        </Spin>
      </Form>
    );
  }
}
export default AdvancedForm;
